<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>公共交通异常检测系统 - 预警管理</title>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <link rel="stylesheet" href="./css/index.css">
  <link rel="stylesheet" href="./css/traffic-alert.css">
  <link rel="icon" href="./img/logo_nobackground.png" type="image/png">
</head>
<body>
  <div id="app">
    <!-- 加载遮罩 -->
    <transition name="fade">
      <div v-if="loading" class="loading-overlay">
        <div class="loading-content">
          <div class="loading-spinner">
            <i class="el-icon-loading"></i>
          </div>
          <div>{{ loadingText }}</div>
        </div>
      </div>
    </transition>

    <div class="admin-layout" v-show="!loading">
      <!-- 顶部导航栏 -->
      <header class="admin-header">
        <div class="header-left">
          <div class="logo-section">
            <img src="./img/logo_nobackground.png" alt="公共交通异常检测系统" class="header-logo">
            <h1 class="system-title">公共交通异常检测系统</h1>
          </div>
          <div class="breadcrumb-section">
            <el-breadcrumb separator="/">
              <el-breadcrumb-item>交通监控</el-breadcrumb-item>
              <el-breadcrumb-item>预警管理</el-breadcrumb-item>
            </el-breadcrumb>
          </div>
        </div>

        <div class="header-right">
          <el-badge :value="notificationCount" class="notification-badge">
            <el-button type="text" @click="showNotifications">
              <i class="el-icon-bell"></i>
            </el-button>
          </el-badge>

          <el-dropdown @command="handleUserCommand" class="user-dropdown">
            <div class="user-info">
              <el-avatar :size="32" :src="userAvatar" icon="el-icon-user-solid"></el-avatar>
              <span class="username">{{ username }}</span>
              <i class="el-icon-arrow-down"></i>
            </div>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="profile">
                <i class="el-icon-user"></i> 个人信息
              </el-dropdown-item>
              <el-dropdown-item command="settings">
                <i class="el-icon-setting"></i> 系统设置
              </el-dropdown-item>
              <el-dropdown-item divided command="logout">
                <i class="el-icon-switch-button"></i> 退出登录
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </header>

      <!-- 主内容区 -->
      <div class="admin-main">
        <!-- 侧边导航 -->
        <aside class="admin-sidebar" :class="{ 'collapsed': sidebarCollapsed }">
          <div class="sidebar-toggle" @click="toggleSidebar">
            <i :class="sidebarCollapsed ? 'el-icon-s-unfold' : 'el-icon-s-fold'"></i>
          </div>

          <el-menu :default-active="activeMenu" :collapse="sidebarCollapsed" @select="handleMenuSelect"
            class="sidebar-menu">

            <el-menu-item index="dashboard">
              <i class="el-icon-data-board"></i>
              <span slot="title">首页</span>
            </el-menu-item>

            <el-submenu index="traffic">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>交通监控</span>
              </template>
              <el-menu-item index="traffic-monitor">实时监控</el-menu-item>
              <el-menu-item index="traffic-analysis">数据分析</el-menu-item>
              <el-menu-item index="traffic-alert">预警管理</el-menu-item>
            </el-submenu>

            <el-submenu index="vehicle">
              <template slot="title">
                <i class="el-icon-truck"></i>
                <span>车辆管理</span>
              </template>
              <el-menu-item index="vehicle-list">车辆列表</el-menu-item>
              <el-menu-item index="vehicle-tracking">车辆追踪</el-menu-item>
              <el-menu-item index="vehicle-maintenance">维护记录</el-menu-item>
            </el-submenu>

            <el-submenu index="data">
              <template slot="title">
                <i class="el-icon-pie-chart"></i>
                <span>数据统计</span>
              </template>
              <el-menu-item index="data-overview">数据概览</el-menu-item>
              <el-menu-item index="data-report">报表生成</el-menu-item>
              <el-menu-item index="data-export">数据导出</el-menu-item>
            </el-submenu>

            <el-menu-item index="system">
              <i class="el-icon-setting"></i>
              <span slot="title">系统管理</span>
            </el-menu-item>
          </el-menu>
        </aside>

        <!-- 预警管理内容 -->
        <div class="alert-container">
          <!-- 预警概览卡片 -->
          <div class="alert-overview">
            <el-row :gutter="20">
              <el-col :span="6">
                <div class="alert-stat-card">
                  <div class="stat-icon warning">
                    <i class="el-icon-warning"></i>
                  </div>
                  <div class="stat-info">
                    <h3>{{ stats.pending }}</h3>
                    <p>待处理预警</p>
                  </div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="alert-stat-card">
                  <div class="stat-icon processing">
                    <i class="el-icon-loading"></i>
                  </div>
                  <div class="stat-info">
                    <h3>{{ stats.processing }}</h3>
                    <p>处理中</p>
                  </div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="alert-stat-card">
                  <div class="stat-icon success">
                    <i class="el-icon-success"></i>
                  </div>
                  <div class="stat-info">
                    <h3>{{ stats.resolved }}</h3>
                    <p>已解决</p>
                  </div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="alert-stat-card">
                  <div class="stat-icon info">
                    <i class="el-icon-data-line"></i>
                  </div>
                  <div class="stat-info">
                    <h3>{{ stats.total }}</h3>
                    <p>总计预警</p>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>

          <!-- 预警管理工具栏 -->
          <div class="alert-toolbar">
            <div class="toolbar-left">
              <el-button type="primary" @click="createAlert">
                <i class="el-icon-plus"></i> 新建预警
              </el-button>
              <el-button type="success" @click="exportAlerts">
                <i class="el-icon-download"></i> 导出数据
              </el-button>
            </div>
            <div class="toolbar-right">
              <el-input
                placeholder="搜索预警信息"
                v-model="searchQuery"
                prefix-icon="el-icon-search"
                clearable
                @clear="handleSearchClear"
                class="search-input">
              </el-input>
              <el-select v-model="filterStatus" placeholder="状态筛选" clearable>
                <el-option label="待处理" value="pending"></el-option>
                <el-option label="处理中" value="processing"></el-option>
                <el-option label="已解决" value="resolved"></el-option>
              </el-select>
              <el-date-picker
                v-model="dateRange"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd">
              </el-date-picker>
            </div>
          </div>

          <!-- 预警列表 -->
          <div class="alert-list">
            <el-table
              :data="alertList"
              style="width: 100%"
              :header-cell-style="{ background: '#f5f7fa' }"
              v-loading="tableLoading">
              <el-table-column prop="level" label="预警等级" width="120">
                <template slot-scope="scope">
                  <el-tag :type="getAlertLevelTag(scope.row.level)">
                    {{ scope.row.level }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="vehicleInfo" label="车辆信息" width="150"></el-table-column>
              <el-table-column prop="abnormal" label="异常情况" width="250"></el-table-column>
              <el-table-column prop="location" label="位置信息" width="250"></el-table-column>
              <el-table-column prop="status" label="状态" width="120">
                <template slot-scope="scope">
                  <el-tag :type="getStatusTag(scope.row.status)">
                    {{ scope.row.status }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="createTime" label="创建时间" width="200"></el-table-column>
              <el-table-column label="操作" min-width="180">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="primary"
                    @click="handleEdit(scope.row)">处理</el-button>
                  <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>

            <!-- 分页 -->
            <div class="pagination-container">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 预警处理对话框 -->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleDialogClose">
      <el-form :model="alertForm" :rules="alertRules" ref="alertForm" label-width="100px">
        <el-form-item label="预警类型" prop="type">
          <el-select v-model="alertForm.type" placeholder="请选择预警类型">
            <el-option label="交通拥堵" value="congestion"></el-option>
            <el-option label="事故" value="accident"></el-option>
            <el-option label="天气" value="weather"></el-option>
            <el-option label="设备故障" value="device"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="位置信息" prop="location">
          <el-input v-model="alertForm.location" placeholder="请输入位置信息"></el-input>
        </el-form-item>
        <el-form-item label="预警描述" prop="description">
          <el-input type="textarea" v-model="alertForm.description" rows="4" placeholder="请输入预警描述"></el-input>
        </el-form-item>
        <el-form-item label="处理状态" prop="status">
          <el-select v-model="alertForm.status" placeholder="请选择处理状态">
            <el-option label="待处理" value="pending"></el-option>
            <el-option label="处理中" value="processing"></el-option>
            <el-option label="已解决" value="resolved"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="处理备注" prop="remark">
          <el-input type="textarea" v-model="alertForm.remark" rows="3" placeholder="请输入处理备注"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitAlert">确 定</el-button>
      </span>
    </el-dialog>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
    new Vue({
      el: '#app',
      data() {
        return {
          // 加载状态
          loading: true,
          loadingText: '正在加载预警管理系统...',
          tableLoading: false,

          // 侧边栏状态
          sidebarCollapsed: false,
          activeMenu: 'traffic-alert',

          // 用户信息
          username: '管理员',
          userAvatar: './img/myphoto2.jpg',
          notificationCount: 3,

          // 统计数据
          stats: {
            pending: 15,
            processing: 8,
            resolved: 45,
            total: 68
          },

          // 搜索和筛选
          searchQuery: '',
          filterStatus: '',
          dateRange: '',

          // 表格数据
          alertList: [
            {
              level: '一般',
              vehicleInfo: '105路公交车',
              abnormal: '疲劳驾驶预警',
              location: '大学城美院-区门诊',
              status: '待处理',
              createTime: '2025-05-28 10:32:26',
              driver: '张师傅',
              plateNumber: '渝BW2273'
            },
            {
              level: '一般',
              vehicleInfo: '132路公交车',
              abnormal: '运行正常',
              location: '重庆市北碚区天生路',
              status: '已解决',
              createTime: '2025-05-28 09:15:26',
              driver: '龚师傅',
              plateNumber: '渝BW7542'
            },
            {
              level: '一般',
              vehicleInfo: '曹操出行网约车1',
              abnormal: '运行正常',
              location: '重庆市北碚区英华路',
              status: '已解决',
              createTime: '2025-05-28 08:45:41',
              driver: '王师傅',
              plateNumber: '渝CB9125'
            },
            {
              level: '一般',
              vehicleInfo: '滴滴出行网约车1',
              abnormal: '运行正常',
              location: '重庆市北碚区龙凤大道',
              status: '已解决',
              createTime: '2025-05-28 08:15:25',
              driver: '杨师傅',
              plateNumber: '渝A2057M'
            },
            {
              level: '紧急',
              vehicleInfo: '滴滴出行网约车014',
              abnormal: '乘客身体状况疑似异常',
              location: '重庆市北碚区学宛路',
              status: '已解决',
              createTime: '2025-04-27 14:11:25'
            },
            {
              level: '一般',
              vehicleInfo: '公交009',
              abnormal: '乘客疑似发生争吵',
              location: '重庆市北碚区融会中路',
              status: '已解决',
              createTime: '2025-04-22 21:15:57'
            },
            {
              level: '一般',
              vehicleInfo: '公交074',
              abnormal: '司机疑似疲劳驾驶',
              location: '重庆市北碚区龙凤大道',
              status: '已解决',
              createTime: '2025-04-15 20:58:10'
            },
            {
              level: '一般',
              vehicleInfo: '公交105',
              abnormal: '乘客疑似发生争吵',
              location: '重庆市北碚区北泉路',
              status: '已解决',
              createTime: '2025-04-02 18:28:40'
            }
          ],
          currentPage: 1,
          pageSize: 10,
          total: 0,

          // 对话框
          dialogVisible: false,
          dialogTitle: '新建预警',
          alertForm: {
            type: '',
            location: '',
            description: '',
            status: '',
            remark: ''
          },
          alertRules: {
            type: [{ required: true, message: '请选择预警类型', trigger: 'change' }],
            location: [{ required: true, message: '请输入位置信息', trigger: 'blur' }],
            description: [{ required: true, message: '请输入预警描述', trigger: 'blur' }],
            status: [{ required: true, message: '请选择处理状态', trigger: 'change' }]
          }
        };
      },
      mounted() {
        this.initSystem();
      },
      methods: {
        // 系统初始化
        async initSystem() {
          try {
            await this.simulateLoading();
            this.loading = false;
            this.fetchAlertList();
          } catch (error) {
            console.error('System initialization error:', error);
            this.$message.error('系统初始化失败');
          }
        },

        // 模拟加载过程
        simulateLoading() {
          return new Promise(resolve => {
            setTimeout(resolve, 1500);
          });
        },

        // 获取预警列表
        fetchAlertList() {
          this.tableLoading = true;
          // 模拟API调用
          setTimeout(() => {
            this.alertList = [
              {
                level: '一般',
                vehicleInfo: '公交072',
                abnormal: '司机疑似疲劳驾驶',
                location: '重庆市北碚区奔月路',
                status: '待处理',
                createTime: '2025-05-12 15:28:26'
              },
              {
                level: '一般',
                vehicleInfo: '公交048',
                abnormal: '乘客疑似发生争吵',
                location: '重庆市北碚区天生路',
                status: '处理中',
                createTime: '2025-05-11 10:47:14'
              },
              {
                level: '一般',
                vehicleInfo: '曹操出行网约车002',
                abnormal: '司机疑似疲劳驾驶',
                location: '重庆市北碚区天生路',
                status: '已解决',
                createTime: '2025-05-02 08:45:41'
              },
              {
                level: '紧急',
                vehicleInfo: '滴滴出行网约车014',
                abnormal: '乘客身体状况疑似异常',
                location: '重庆市北碚区学宛路',
                status: '已解决',
                createTime: '2025-04-27 14:11:25'
              },
              {
                level: '一般',
                vehicleInfo: '公交009',
                abnormal: '乘客疑似发生争吵',
                location: '重庆市北碚区融会中路',
                status: '已解决',
                createTime: '2025-04-22 21:15:57'
              },
              {
                level: '一般',
                vehicleInfo: '公交074',
                abnormal: '司机疑似疲劳驾驶',
                location: '重庆市北碚区龙凤大道',
                status: '已解决',
                createTime: '2025-04-15 20:58:10'
              },
              {
                level: '一般',
                vehicleInfo: '公交105',
                abnormal: '乘客疑似发生争吵',
                location: '重庆市北碚区北泉路',
                status: '已解决',
                createTime: '2025-04-02 18:28:40'
              }
            ];
            this.total = this.alertList.length;
            this.tableLoading = false;
          }, 1000);
        },

        // 状态标签样式
        getStatusTag(status) {
          const tags = {
            '待处理': 'warning',
            '处理中': 'primary',
            '已解决': 'success'
          };
          return tags[status] || 'info';
        },

        // 获取预警类型标签样式
        getAlertTypeTag(type) {
          const tags = {
            '交通拥堵': 'warning',
            '事故': 'danger',
            '天气': 'info'
          };
          return tags[type] || 'info';
        },

        // 获取预警等级标签样式
        getAlertLevelTag(level) {
          const tags = {
            '紧急': 'danger',
            '一般': 'warning'
          };
          return tags[level] || 'info';
        },

        // 创建预警
        createAlert() {
          this.dialogTitle = '新建预警';
          this.alertForm = {
            type: '',
            location: '',
            description: '',
            status: 'pending',
            remark: ''
          };
          this.dialogVisible = true;
        },

        // 编辑预警
        handleEdit(row) {
          this.dialogTitle = '处理预警';
          this.alertForm = { ...row };
          this.dialogVisible = true;
        },

        // 删除预警
        handleDelete(row) {
          this.$confirm('确认删除该预警记录吗？', '提示', {
            type: 'warning'
          }).then(() => {
            this.$message.success('删除成功');
            this.fetchAlertList();
          }).catch(() => {});
        },

        // 提交预警表单
        submitAlert() {
          this.$refs.alertForm.validate((valid) => {
            if (valid) {
              this.$message.success('操作成功');
              this.dialogVisible = false;
              this.fetchAlertList();
            }
          });
        },

        // 导出数据
        exportAlerts() {
          this.$message.success('数据导出中...');
        },

        // 分页处理
        handleSizeChange(val) {
          this.pageSize = val;
          this.fetchAlertList();
        },

        handleCurrentChange(val) {
          this.currentPage = val;
          this.fetchAlertList();
        },

        // 搜索处理
        handleSearchClear() {
          this.fetchAlertList();
        },

        // 对话框关闭处理
        handleDialogClose(done) {
          this.$confirm('确认关闭？')
            .then(_ => {
              done();
            })
            .catch(_ => {});
        },

        // 用户相关操作
        showNotifications() {
          this.$message.info('通知功能开发中');
        },

        handleUserCommand(command) {
          switch (command) {
            case 'profile':
              this.$message.info('个人信息功能开发中');
              break;
            case 'settings':
              this.$message.info('系统设置功能开发中');
              break;
            case 'logout':
              this.$confirm('确定要退出登录吗？', '提示', {
                type: 'warning'
              }).then(() => {
                window.location.href = './login.html';
              });
              break;
          }
        },

        // 侧边栏切换
        toggleSidebar() {
          this.sidebarCollapsed = !this.sidebarCollapsed;
        },

        // 菜单选择处理
        handleMenuSelect(index) {
          // 页面跳转映射配置
          const pageRoutes = {
            'dashboard': './index.html',
            'traffic-monitor': './traffic-monitor.html',
            'traffic-analysis': './traffic-analysis.html',
            'traffic-alert': './traffic-alert.html',
            'vehicle-list': './vehicle-list.html',
            'vehicle-tracking': './vehicle-tracking.html',
            'vehicle-maintenance': './vehicle-maintenance.html',
            'data-overview': './data-overview.html',
            'data-report': './data-report.html',
            'data-export': './data-export.html',
            'system': './system-management.html'
          };

          if (pageRoutes[index]) {
            window.location.href = pageRoutes[index];
          }
        }
      }
    });
  </script>
</body>
</html>